<template>
  <div class="siteBox">
        <search ref="search"></search>
        <flexbox class="topBox">
            <flexbox-item >
                <div class="flex-demo" >
                    <popup-picker  :data="list1" v-model="value1"  placeholder="省份" value-text-align="center" @on-hide="onHide"></popup-picker>
                </div>
            </flexbox-item>
            <flexbox-item>
                <div class="flex-demo">
                    <popup-picker  :data="list2" v-model="value2"  placeholder="市/地区" value-text-align="center" @on-hide="onHide1"></popup-picker>                    
                </div>
            </flexbox-item>
            <flexbox-item>
                <div class="flex-demo " >
                    <popup-picker  :data="list3" v-model="value3"  placeholder="站点" value-text-align="center" @on-hide="onHide2"></popup-picker>                                        
                </div>
            </flexbox-item>
        </flexbox>
         <group  class="siteList">
            <ul v-show="isShow">
                <li v-for="(item,$index) in radio001"  @click="showPlugin($index)">
                    <p  class="one">{{item.f_station_name}}</p>
                    <p  class="two">{{item.f_address}}</p>
                </li>
            </ul>
        </group>
     
        
  </div>
</template>
<script>
    import { Search, Group, Cell, XButton,Grid,GridItem,GroupTitle,Icon,Flexbox ,FlexboxItem,Divider,PopupPicker,Radio,Confirm} from 'vux'
    import store from '@/vuex/store'
    export default {
        data(){
            return {
                 list1: [],
                 oldList:'',
                 list2:[],
                 oldList1:'',
                 list3:[],
                 oldList2:'',
                 value1:[],
                 value2:[],
                 value3:[],
                 value:'',
                 isShow:false,
                 radio001: [], 
            }
        },
        created:function(){
            var _this = this;
            $.ajax({
                url:'http://bg.test.baimixu.cn/index.php?m=Home&c=SendApi&a=getPosition',
                data:{id:0},
                type:'get',
                dataType:"jsonp",
                success: function(data) {
                    _this.oldList = data.d
                    _this.chulidata(data.d)
                },
                error:function(){
                    _this.$vuex.toast.show({
                        text:'数据请求有误'
                    })
                }
            })
        },
        methods:{
            // 处理数据
            chulidata(data){
                var list =[];
                data.forEach(function(element) {
                    list.push(element.f_areaname)
                }, this);
                this.list1.push(list)
                // console.log(this.list1)
            },
            chuliarea(data){
                this.list2 = [];
                var list = [];
                    data.forEach(function(item){
                    list.push(item.f_areaname)
                    
                },this)
                this.list2.push(list)
            },
            chulisite(data){
                this.list3 = [];
                var list = [];
                    data.forEach(function(item){
                    list.push(item.f_areaname)
                    
                },this)
                this.list3.push(list)
            },
             showPlugin ($index) {
                var _this = this;
                 
                 console.log(_this.radio001[$index].f_station_name)
                this.$vux.confirm.show({
                    title: 'Title',
                    content: '确认站点',
                    onShow () {
                    console.log('plugin show')
                    },
                    onCancel () {
                    console.log('plugin cancel')
                    },
                    onConfirm () {
                        _this.$store.state.sitename = _this.radio001[$index].f_station_name;
                        _this.$store.state.siteId = _this.radio001[$index].f_user_id;
                        _this.$store.commit('showUserName')
                        _this.$router.go(-1)
                    }
                })
            },
            onHide(){
            //    获取省份的ID
                var _this = this;
                var id;
                this.oldList.forEach(function(item){
                    if(_this.value1 == item.f_areaname){
                        id = item.f_id
                    }
                })
                console.log(id)
                $.ajax({
                    url:'http://bg.test.baimixu.cn/index.php?m=Home&c=SendApi&a=getStation', 
                    data:{provinceId:id,nowPage:1,perNum:100},
                    type:'get',
                    dataType:"jsonp",
                    success: function(data) {
                        _this.radio001 = data.d.data;
                        _this.isShow = true;
                    },
                    error:function(){
                        _this.$vuex.toast.show({
                            text:'数据请求有误'
                        })
                    }
                })
                $.ajax({
                    url:'http://bg.test.baimixu.cn/index.php?m=Home&c=SendApi&a=getPosition',
                    data:{id:id},
                    type:'get',
                    dataType:"jsonp",
                    success:function(data){
                        _this.chuliarea(data.d)
                        _this.oldList1 = data.d;
                        
                    }
                })
            },
            onHide1(){
                var _this = this;
                var id;
                this.oldList1.forEach(function(item){
                   console.log(_this.value2[0])
                   if(_this.value2 == item.f_areaname){
                       id = item.f_id
                   }
                })
                $.ajax({
                    url:'http://bg.test.baimixu.cn/index.php?m=Home&c=SendApi&a=getPosition',
                    data:{id:id},
                    dataType:'jsonp',
                    type:'get',
                    success:function(data){
                        _this.chulisite(data.d)
                        _this.oldList2 = data.d
                    }
                })
                $.ajax({
                    url:'http://bg.test.baimixu.cn/index.php?m=Home&c=SendApi&a=getStation', 
                    data:{cityId:id,nowPage:1,perNum:20},
                    type:'get',
                    dataType:"jsonp",
                    success: function(data) {
                        _this.radio001 = data.d.data; 
                        console.log(_this.radio001)
                    },
                    error:function(){
                        _this.$vuex.toast.show({
                            text:'数据请求有误'
                        })
                    }
                })
                
            },
            onHide2(){
                var _this = this;
                var id;
                this.oldList2.forEach(function(item){
                   
                   if(_this.value3 == item.f_areaname){
                       id = item.f_id
                   }
                })
                 $.ajax({
                    url:'http://bg.test.baimixu.cn/index.php?m=Home&c=SendApi&a=getStation', 
                    data:{areaId:id,nowPage:1,perNum:20},
                    type:'get',
                    dataType:"jsonp",
                    success: function(data) {
                        _this.radio001 = data.d.data; 
                    },
                    error:function(){
                        _this.$vuex.toast.show({
                            text:'数据请求有误'
                        })
                    }
                })
            }
        },
        components:{
            Search,
            Group,
            Cell,
            XButton,
            Grid,
            GridItem,
            GroupTitle,
            Icon,
            Flexbox,
            FlexboxItem,
            Divider,
            PopupPicker,
            Radio,
            Confirm
        },
        store
    }
</script>
<style>

</style>
